import React, { PropTypes } from 'react';
import TweenOne from 'rc-tween-one';

import { Menu, Icon, Switch, Breadcrumb, notification, Popover, Button, Modal, Form, Input, message} from 'antd';
const SubMenu = Menu.SubMenu;

import { Router, Route, IndexRoute, Link } from 'react-router';

import './less/Nav.less';

var Routes = ['/app/index','/app/user','/app/home/list1','/app/member','/app/estate','/app/home/list4','/app/home/list5','/app/home/list6']

class Nav extends React.Component {
  static contextTypes = {

  };

  static defaultProps = {

  };

  constructor(props){
    super(props);
    this.state = {
        selected:1
    }
  }

  componentDidMount(){

  }

  render() {
    var _temp = (
      <div>
        <div> <Link to={{pathname:'/app/room',query:{id:7}}} activeClassName="linkActive">房源管理</Link></div>
        <div><Link to={{pathname:'/app/cashier',query:{id:8}}} activeClassName="linkActive">收银结算</Link></div>
        <div>测试菜单3</div>
        <div>测试菜单4</div>
      </div>
    )
    return (
      <TweenOne
        className="header"
        animation={{ opacity: 0, type: 'from' }}
      >
          <TweenOne
            className={`header-logo`}
            animation={{ x: -30, delay: 100, type: 'from', ease: 'easeOutQuad' }}
          >
            <img height="33" src={require('../assets/logo.png')} />冠江集团
          </TweenOne>
          <TweenOne
            className={`header-nav`}
            animation={{ x: 30, delay: 100, type: 'from', ease: 'easeOutQuad' }}
          >
            <ul>
              {
                ['首页','CRM','经营管理','会员管理','物业管理','用户管理','收银结算'].map((ele,index)=>{
                  return(
                    <TweenOne
                      key={'topMenu'+index}
                      style={{float:'left',opacity:1}}
                      animation={{ x: 80,opacity:0, delay: 200*index, type: 'from', ease: 'easeOutQuad' }}
                    >
                      <li>
                        <Link to={{pathname:Routes[index],query:{id:index}}} activeClassName="linkActive">
                          <div className={"header-nav-img header-nav-img"+(index+1)+" header-nav-click"}>
                              <span>{ele}</span>
                          </div>
                        </Link>
                      </li>
                      <div className="plot"></div>
                    </TweenOne>
                  )
                })
              }
                <TweenOne
                  style={{float:'left',opacity:1}}
                  animation={{ x: 80,opacity:0, delay: 1500, type: 'from', ease: 'easeOutQuad' }}
                >
                  <Popover placement="bottomLeft" content={_temp}>
                    <span className="more">查看其他<Icon type="down" /></span>
                  </Popover>
                </TweenOne>
            </ul>
          </TweenOne>
          <TweenOne
            className={`header-user`}
            animation={{ x: 30, delay: 2000, opacity: 0, type: 'from', ease: 'easeOutQuad' }}
            style={{ lineHeight: '62px', height: 64 }}
            >
            <a className="user">
              <span className="img">
                <img
                  src="https://zos.alipayobjects.com/rmsportal/iXsgowFDTJtGpZM.png"
                  width="30"
                  height="30"
                />
              </span>
              <span>用户名</span>
            </a>
          </TweenOne>
      </TweenOne>
    )
  }
}

export default Nav;
